<template>
  <div>
    <button @click="addAddfn">加一</button>
  <div>年龄{{ age }}</div>
  <div>vue2中{{ a }}</div>
  <div>vue2中读取vue3定义的变量{{ c }}</div>
  </div>
</template>
<script lang="ts">
export default {
  name: "person",
  setup() {
    let age = 15; //vue3种弱化了this问题 不需要this
    function addAddfn() {
      age = age + 1;
      console.log("666", age); //此时数据不是响应式的
    }
    return { age, addAddfn }; //把定义的方法和数据交出去
    return function () {
      return "哈哈";
    }; //也可以直接返回出去一个函数
  },
  data(){
    return {
        a :5,
        c:this.age    //setup执行要比data早   setup中出现this你就输了  但是data，完全可以拿去vue3中定义的变量   向上兼容
    }
  }
};
</script>
//vue3可以没有根标签   不建议vue3和vue2一块写，vuen2能读取到vue3中的东西